<template>
	<view class="repairUpdate">
		<view class="repairUpdate-content ff-bg-fff ff-border-radius-10">
			<view class="ff-margin-bottom-10 ff-font-16 ff-font-weight-600">
				提交证明材料
			</view>
			<view class="ff-color-9A9A9A ff-font-12 ff-margin-bottom-15">已失效的抽查任务可提交相关证明材料</view>
			<view class="ff-font-15 ff-font-weight-600 ff-margin-bottom-10">文字说明</view>
			<textarea v-if="textareaState" style="background-color: #fff;border: 2rpx solid #bfb7b7;"
				v-model="params.evidenceDescription" maxlength="-1" placeholder="请输入文字说明"></textarea>
			<view class="ff-font-15 ff-font-weight-600 ff-margin-top-15 ff-margin-bottom-10">证明材料</view>
			<view class="repairUpdate-content-info ff-margin-bottom-15">
				<u-row gutter="20">
					<u-col span="3" v-for="(item, index) of params.evidenceAttachList" :key="index">
						<view class="contracImg ff-margin-bottom-10 ff-relative ff-border-radius-5 ff-overflow-hidden"
							@click="previewImgClick(item)">
							<image :src="item" mode="" />
							<view @click.stop="deteleImgClick(index)" class="closeIcon"><u-icon name="close"
									color="#fff" size="22"></u-icon></view>
						</view>
					</u-col>
					<u-col span="3">
						<image class="contracImg" @click="upateImgClick()"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/upate-icon.png"
							mode="" />
					</u-col>
				</u-row>
			</view>

		</view>
		<view class="repairUpdate-butList">
			<view class="repairUpdate-butList-box ff-align-items-1 ff-flex-between">
				<view class="repairUpdate-butList-box-reject animate__animated animate__bounceInLeft"><u-button
						@click="cancelClick" type="warning">取消</u-button></view>
				<view class="repairUpdate-butList-box-pass animate__animated animate__bounceInRight"><u-button
						@click="updateClick" type="primary">提交</u-button></view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- helangCompress-压缩图片 -->
		<f-compressImg ref="helangCompress" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textareaState: true,
				params: {
					id: '', // 抽查任务ID
					evidenceDescription: '', // 抽查证明材料说明
					evidenceAttachList: [], // 证明材料附件列表
				}
			}
		},
		onLoad(e) {
			this.params.id = e.id
		},
		methods: {
			// 返回上一层
			goBack() {
				this.$pageJump.navigateBack()
			},
			// 上传图片
			upateImgClick() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'], // 拍照 video：视频
					camera: 'back', // 后置摄像头
					sizeType: ['compressed'], // original 原图，compressed 压缩图
					sourceType: ['camera', 'album'],
					success: function(res) {
						that.$refs.loading.openLoading('上传中···'); // 打开loading动画
						that.textareaState = false
						that.$refs.helangCompress
							.compress({
								src: res.tempFiles[0].tempFilePath
							})
							.then(res => {
								// 压缩成功回调
								that.$uploadImg.uploadImgOSS(res, 15).then(res => {
									if (res) {
										that.$refs.loading.closeLoading(); // 关闭loading动画
										that.$refs.uToast.show({
											title: '上传成功',
											type: 'success'
										});
										setTimeout(() => {
											that.textareaState = true
										}, 300)
										that.params.evidenceAttachList.push(res);
										// 图片保存到本地（用户想把拍的照片保存到本地）
										// uni.saveImageToPhotosAlbum({
										// 	filePath: res,
										// 	success: function() {},
										// 	fail() {
										// 		this.$showModal('您拒绝了图片保存到系统相册')
										// 	}
										// });
									} else {
										that.$refs.loading.closeLoading(); // 关闭loading动画
										setTimeout(() => {
											that.textareaState = true
										}, 300)
										that.$refs.uToast.show({
											title: '上传失败，请重新上传',
											type: 'error'
										});
									}
								});
							})
							.catch(() => {
								// 压缩失败回调
								// console.log('压缩失败回调', err);
								that.$refs.loading.closeLoading(); // 关闭loading动画
								that.$refs.uToast.show({
									title: '上传失败，请重新上传！',
									type: 'error'
								});
							});
					}
				});
			},
			// 删除图片
			deteleImgClick(index) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除当前照片吗？',
					confirmColor: '#3178FF',
					cancelColor: '#606266',
					success: res => {
						if (res.confirm) {
							that.params.evidenceAttachList.splice(index, 1)
							that.$refs.uToast.show({
								title: '删除成功',
								type: 'success'
							});
						}
					}
				});
			},
			// 预览图片
			previewImgClick(item) {
				uni.previewImage({
					urls: this.params.evidenceAttachList,
					current: item
				});
			},
			// 取消返回维修列表页面
			cancelClick() {
				this.$pageJump.navigateBack()
			},
			// 上传提交证明材料
			async updateClick() {
				let that = this
				if (that.params.evidenceAttachList.length > 0 || that.params.evidenceDescription) {
					that.$refs.loading.openLoading('上传中···'); // 打开loading动画
					that.textareaState = false
					uni.showModal({
						title: '温馨提示',
						content: '请确认是否提交？',
						confirmText: '确认',
						confirmColor: '#3178FF',
						cancelColor: '#606266',
						success: res => {
							if (res.confirm) {
								that.$http.post({
									url: '/serviceOrg/checkTask/submitCheckEvidence',
									data: that.params
								}).then(data => {
									that.$refs.loading.closeLoading(); // 关闭loading动画
									if (data.code == 200) {
										that.textareaState = true
										setTimeout(() => {
											that.$refs.uToast.show({
												title: data.msg,
												type: 'success'
											});
											that.$pageJump.reLaunch(
												'/pages/maintenance/public/personal/spotTask/spotTask?type=' +
												1
											);
										}, 500)
									} else {
										that.$refs.uToast.show({
											title: data.msg,
											type: 'error'
										});
										setTimeout(() => {
											that.textareaState = true
										}, 2000)
									}
								})
							} else {
								that.textareaState = true
								that.$refs.loading.closeLoading(); // 关闭loading动画
							}
						}
					})
				} else {
					uni.showModal({
						title: '',
						content: '请录入文字或上传资料',
						confirmColor: '#3178FF',
						showCancel: false,
						success: res => {
							if (res.confirm) {}
						}
					})
					return
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repairUpdate {
		&-content {
			margin: 30rpx 20rpx;
			padding: 30rpx;

			&-tips {
				background-color: #E8F0FF;
				color: #3178FF;
			}

			&-info {

				.contracImg {
					width: 100%;
					height: 140rpx;

					image {
						width: 100%;
						height: 140rpx;
					}
				}
			}
		}

		textarea {
			width: 94%;
			height: 200rpx;
			background: #F7F8FA;
			padding: 15rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
		}

		&-butList {
			width: 100%;

			&-box {
				width: 90%;
				margin: 20% 5%;

				/deep/.u-size-default {
					height: 100rpx !important;
					line-height: 100rpx !important;
				}

				&-reject {
					width: 48%;

					/deep/.u-btn--warning {
						border: 2rpx solid #3178ff;
						background-color: #ffffff;
						color: #3178ff;
					}

					/deep/.u-warning-hover {
						background-color: #ffffff !important;
					}
				}

				&-pass {
					width: 48%;
				}
			}
		}
	}
</style>